<template>
  <div class="contBody">
    <h2 class="title">代码编辑器</h2>
    <div class="btn">
      <el-button type="primary" @click="handleSaveCode">保存</el-button>
    </div>
    <aceEditor :contentCode="contentCode" @updateFun="updateFun" />
  </div>
</template>

<script>
import aceEditor from "@/components/vue3AceEditor";

export default {
  name: "CodeEditorPage",
  components: { aceEditor },
  data() {
    return {
      contentCode: '',
    };
  },
  methods: {
    updateFun(code) {
      this.contentCode = code;
    },
    // 保存
    handleSaveCode() {
      alert(this.contentCode);
    },
  },
};
</script>

<style scoped>
.contBody .title {
  padding: 0 0 24px;
}
.btn {
  text-align: left;
  padding: 0 0 10px;
}
</style>
